<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/cat.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>three + Vue + TS</title>
    <style>
      .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
      }
      .card {
        display: block;
        font: 20px 楷体;
        flex: 200px 1 1;
        min-width: 200px;
        aspect-ratio: 1.5;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
        transition: transform 0.2s;
        text-decoration: none;
        color: #338841;
        line-height: calc(100% - 20px);
      }
      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      }

    </style>
  </head>
  <body>
    <div id="app">
      <div class="card-container">
          <a class="card" href="/htmls/fire1.html" target="_blank" rel="noopener noreferrer"
          style="background: url(/shots/firePlace.webp) center center / contain no-repeat content-box; "
          >
            <b class="title">fire1</b>
          </a>
          <a class="card" href="/htmls/tank.html" target="_blank" rel="noopener noreferrer" style="background: url(/shots/tank.webp) center center / contain no-repeat content-box; "
          ><b class="title"> tank</b></a>
          <a class="card" href="/htmls/lotus.html" target="_blank" rel="noopener noreferrer" style="background: url(/shots/莲花.webp) center center / contain no-repeat content-box; "
          ><b class="title">莲花</b> </a>
          <a class="card" href="/htmls/grass.html" target="_blank" rel="noopener noreferrer"
          style="background: url(/shots/grass.webp) center center / contain no-repeat content-box; "
          ><b class="title"> 草地</b> </a>
          <!-- <a class="card" href="/htmls/particles.html" target="_blank" rel="noopener noreferrer"
         
          ><b class="title"> 粒子</b> </a> 
          <a class="card" href="/htmls/flyonMap.html" target="_blank" rel="noopener noreferrer"
         
          ><b class="title"> 逍遥游</b> </a>  -->

      </div>
    </div>
  </body>
</html>
